import {  Col, Row, DatePicker,Button,Tag  } from 'antd';

import React, { useState} from 'react';
import styles from './style.less'
import { SearchOutlined,LineChartOutlined,FileTextOutlined} from '@ant-design/icons';
import SelectArea from '../../energyAnalysis/components/selectArea';
import BarChart from '../../energyAnalysis/components/barChart';
const Monitoring: React.FC = () => {

  

var dataAxis = ['0','00', '01', '02', '03', '04', '05', '06', '07', '08', '09'];
var data = [220, 182, 191, 234, 290, 330, 310, 123, 442, 321, 310];
var name="需量";
var chart={
  dataAxis:dataAxis,
  data:data,
  name:name,
  type:'line',
  smooth:true
}

const [charOption, setChartOption] = useState(chart);

function onChange(date, dateString) {
  console.log(date, dateString);
}


function tagRender(props) {
  const { label, value, closable, onClose } = props;
  const onPreventMouseDown = event => {
    event.preventDefault();
    event.stopPropagation();
  };
  return (
    <Tag
      color={value}
      onMouseDown={onPreventMouseDown}
      closable={closable}
      onClose={onClose}
      style={{ marginRight: 3 }}
    >
      {label}
    </Tag>
  );
}

    return (
      <>
        <Row        style={{ margin: '-16px 0 '}} > 
          <Col xl={5} lg={5} md={6} sm={6} xs={6} style={{  padding: '24px 12px', borderRight: '1px solid #355fb8' }}>
            <SelectArea/>
          </Col>
          <Col xl={19} lg={19} md={18} sm={18} xs={18} style={{ padding: 22 }} className={styles.servuychart}>

        <Row   > 
          <div  className={styles.inputBg} >
                <DatePicker  popupStyle={{ background: 'rgb(20, 49, 115)'}}    bordered={false} onChange={onChange} />
              </div>
          <Button className={styles.exportBtnBg} style={{marginRight:12}} type="primary" ><SearchOutlined /> 查询 </Button>
         </Row>
         <Row      style={{margin:'12px 0 -30px'}} > 
         <Button className={styles.exportBtnBg} style={{marginRight:12}} type="primary" ><LineChartOutlined /> 图表 </Button>
         <Button className={styles.primaryBtnBg}  type="primary" ><FileTextOutlined /> 数据 </Button>
         </Row>
            <BarChart charOption={charOption} style={{ height: 400, width: '100%',marginBottom:20 }} />
           
          </Col>
        </Row>
      
  </>
    );
};

export default Monitoring;